<script>
import request from "@/utils/request.js";

export default {
  data() {
    return {
      user: {},
      artList: [{}],
      collectionList: [{}],
      filterList: [{}],
      filterByStatus: ''
    }
  },
  methods: {
    getArticleList() {
      request.get("/article/list/" + this.user.id).then(res => {
        this.filterList = res.data;
        this.artList = res.data;
      })
    },
    handleClick(item) {
      if (this.user) {
        localStorage.setItem('articleId', item.id)
        this.$router.push('/article');
      } else {
        this.$router.push('/login');
      }
    },
    filterArt() {
      if (this.filterByStatus === '全部') {
        this.filterList = [...this.artList];
      } else if (this.filterByStatus === '已发布') {
        this.filterList = this.artList.filter(item => item.publishStatus === '已发布');
      } else {
        this.filterList = this.artList.filter(item => item.publishStatus === '草稿');
      }
    },
    handleUpdate(item) {
      localStorage.setItem('articleId', item.id)
      localStorage.setItem('status', 0);
      this.$router.push('/rt');
    },
    handleDelete(item) {
      request.delete("/article/" + item.id).then(res => {
        if (res.code === '0') {
          this.$message({
            message: '删除成功',
            type: 'success'
          });
          this.getArticleList();
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    getCollectionList() {
      request.get('/cc').then(res => {
        this.collectionList = res.data
      })
    },
  },
  created() {
    this.getCollectionList();
    if (localStorage.getItem('user')) {
      this.user = JSON.parse(localStorage.getItem('user'));
      this.getArticleList();
    } else {
      this.$router.push('/login');
    }
  }
}
</script>

<template>
  <div style="width: 1000px;margin-left: 200px">
    <el-select v-model="filterByStatus" style="margin-bottom: 10px;width: 100px;" placeholder="筛选状态"
               @change="filterArt">
      <el-option label="全部" value="全部"></el-option>
      <el-option label="已发布" value="已发布"></el-option>
      <el-option label="草稿" value="草稿"></el-option>
    </el-select>
    <el-row v-for="item in filterList">
      <el-col :span="24">
        <div>
          <el-card shadow="never" style="height: 150px">
            <div style="font-size: large;cursor: pointer" @click="handleClick(item)">
              <span><b>{{ item.title }}</b></span>
            </div>
            <div style="margin-top: 10px;cursor: pointer" @click="handleClick(item)">
              <p v-html="item.description?item.description:'简介'">
              </p>
            </div>
            <div style="margin-top: 10px;font-size: small">
              状态：<span style="color: #409EFF" v-if="item.publishStatus==='已发布'">{{ item.publishStatus }}</span>
              <span style="color: #ff4063" v-else>{{ item.publishStatus }}</span>
              <span>&nbsp;:&nbsp;合集：{{ item.collectionId?collectionList.filter(c => c.id === item.collectionId)[0].name:'无'}}</span>
              <span v-if="item.publishStatus==='已发布'">&nbsp;&nbsp;发布时间&nbsp;:&nbsp;
                <span style="color: #409EFF">
                  {{
                    /**格式化**/
                    new Date(item.publishTime).toLocaleString()
                  }}
                </span>
                </span>
              <span v-else>&nbsp;&nbsp;保存时间&nbsp;:&nbsp;
                <span style="color: #409EFF">
                  {{
                    /**格式化**/
                    new Date(item.publishTime).toLocaleString()
                  }}
                  </span>
              </span>
              修改时间:<span style="color: #409EFF">&nbsp;:&nbsp;{{
                /**格式化**/
                new Date(item.modifyTime).toLocaleString()
              }}</span>
            </div>
            <div>
              <el-space style="float: right;" v-if="item.publishStatus==='已发布'">
                <el-button type="text" @click="handleClick(item)">查看详情</el-button>
                <el-button type="text" @click="handleUpdate(item)">修改</el-button>
                <el-button type="text" @click="handleDelete(item)">删除</el-button>
              </el-space>
              <el-space style="float: right;" v-else>
                <el-button type="text" @click="handleUpdate(item)">继续编辑</el-button>
                <el-button type="text" @click="handleDelete(item)">删除</el-button>
              </el-space>
            </div>
          </el-card>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<style scoped>

</style>